<template>
  <div class="poliy">
    <el-form :model="selectTable" ref="selectTable" :rules="rules" label-width="180px">

    <p class="tip_n">策略基本信息</p>
    <div class="form-inner">
        <el-form-item label="策略名称：">
         西海照明策略
        </el-form-item>
        <el-form-item label="策略生效时间：" >
          2019-09-12 12:20:23
        </el-form-item>
        <el-form-item label="策略失效时间：" >
          2019-09-12 12:20:23
        </el-form-item>
        <el-form-item label="策略类型：">
          西海策略
        </el-form-item>
        <el-form-item label="日出偏移量：" >
            5分钟
        </el-form-item>
        <el-form-item label="是否启用：">
            启用
        </el-form-item>
    </div>

    <div class="line"></div>

    <p class="tip_n">策略动作目标</p>

      <div class="po_taL">
        <el-table
          :data="deviceList" @selection-change="handleSelectionChange"
          border
          style="width: 950px">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            prop="id"
            label="设备ID"/>
          <el-table-column
            prop="name"
            label="设备名称"/>
          <el-table-column
            prop="mode"
            label="设备型号"/>
          <el-table-column
            prop=""
            label="所属商户"/>
          <el-table-column
            prop=""
            label="端口"/>
          <el-table-column
            prop=""
            label="关联传感器类型"/>
          <el-table-column
            prop=""
            label="关联传感器名称"/>
          <el-table-column
            prop=""
            label="关联传感器MAC"/>
        </el-table>
      </div>


    <el-form-item label="执行动作：">
      打开
    </el-form-item>
  </el-form>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        checkAll: false,
        isIndeterminate: true,
        isTiming: 1,
        weeks: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        checkedWeeks: [],
        increaseOrDecrease: '1',
        filterDeviceType: 1,
        selectTable:{
          tm: '',
          isEnable: false,
          minutes: '',
          name:'',
          enableDate:'',
          disableDate: '',
          mode:'',
          check:[],
          resource: 1,
          tDevName: ''
        },
        deviceList: [{
           id: 1
        }],
        rules: {
            name: {required: true, message: '请输入策略名称', trigger: 'blur'},
            enableDate: {required: true, message: '请选择策略生效时间', trigger: 'blur'},
            disableDate: {required: true, message: '请选择策略失效时间', trigger: 'blur'},
            mode: {required: true, message: '请选择策略类型', trigger: 'change'},
            tm: {required: true, message: '请选择时间', trigger: 'change'},
            minutes: {required: true, message: '请输入分钟数', trigger: 'blur'}
        }
      }
    },
    created() {
      this.initData()
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedWeeks = val ? this.weeks : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.weeks.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.weeks.length;
      },
      // 全选
      handleSelectionChange(val) {
          this.multipleSelection = val
      },
      changeStrageyMode() {
        this.isTiming = this.selectTable.mode
        if(this.isTiming == 2 || this.isTiming == 3) {
            this.$refs['tmRef'] && this.$refs['tmRef'].clearValidate()
        }
        if(this.isTiming == 1) {
             this.$refs['sunriseRef'] && this.$refs['sunriseRef'].clearValidate()
        }
      },
      async initData(){},
      searchDevice() {},
      filterDevice(type) {
          this.filterDeviceType = type
      },
      onSubmit() {
        this.$message({
          message: '策略添加成功',
          type: 'success'
        });
      }
    },
  }
</script>

<style lang="less" scoped>
    .poliy {
        background: #fff;
        padding: 20px;
        line-height: 25px;
        overflow: hidden;
    }
    .tip_n {
        border-bottom: 1px solid #ececec;
        padding-bottom: 10px;
        font-weight: bold;
    }
    .weeks {
        display: inline-block!important;
    }
    .stragey-search {
        padding: 20px 0 0 0;
    }
    .poliy .form-inner {
        padding-top: 20px;
    }
    .po_taL {
        padding-left: 100px;
        padding-top: 30px;
    }
    .btns-group {
        margin-left: 420px;
    }
    .btns-group .cur {
        border: 1px solid #409EFF;
        color: #409EFF;
    }
</style>
